<template>
  <div>
    <el-card class="input-card">
      <div class="row-bg">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="input-wrapper">
              <span class="label">客户名称：</span>
              <el-input v-model="input1" placeholder="北京云天创想科技" class="input-gray"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="input-wrapper">
              <span class="label">出库产品：</span>
              <el-input v-model="input2" placeholder="孝心呼叫器器" class="input-gray"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="input-wrapper">
              <span class="label">产品数量：</span>
              <el-input v-model="input3" placeholder="7/10" class="input-gray"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="table_data" style="margin-top: 20px;height: auto;">
      <h3 class="device_head"></h3>
      <el-table :data="tableData" style="width: 100%" highlight-current-row >
        <el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key">
          <template v-slot:default="scope">
            {{ scope.row[key] }}
            <el-tag v-if="key === 'box' && scope.row.box !=='-'" type="danger" effect="plain">出箱</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="code-container">
        <div class="Registration_code">
          <p class="box_code">箱子唯一码</p>
          <el-input
              class="box_input"
              placeholder="请扫描箱子唯一码"
              suffix-icon="el-icon-saoma"
              v-model="box_input">
          </el-input>
          <el-button type="primary" class="dev_button">出库</el-button>
        </div>
        <div class="Device_code">
          <p class="dev_code">设备唯一码</p>
          <el-input
              class="dev_input"
              placeholder="266A0211B22F08"
              suffix-icon="el-icon-saoma"
              v-model="device_input">
          </el-input>
          <el-button type="primary" class="dev_button">出库</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      box_input:'',
      device_input:'',
      tableData: [
        {
          index:1,
          device:"266A0211B22F08",
          time:"2024-03-19 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:2,
          device:"266A8156179DBE",
          time:"2024-02-11 15:20",
          box:"-",
          worker:"张三"
        },
        {
          index:3,
          device:"266AF5D9020D7A",
          time:"2024-01-15 18:30",
          box:"240300001",
          worker:"张三"
        },
        {
          index:4,
          device:"266AF51FDC76C2",
          time:"2024-01-01 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:5,
          device:"266A7205128149",
          time:"2024-12-19 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:6,
          device:"266AF51FDC4569",
          time:"2024-12-14 15:30",
          box:"240300001",
          worker:"张三"
        },
        {
          index:7,
          device:"266A720512RT45",
          time:"2024-12-10 15:30",
          box:"240300001",
          worker:"张三"
        }
      ],
      tableLabel: {
        index: "序号",
        device: "设备唯一码",
        time: "入库时间",
        box:"箱号",
        worker: "操作员"
      },
      inputTable:[
        {
          index:1,
          device:"266A0211B22F08",
          time:"2024-03-19 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:2,
          device:"266A8156179DBE",
          time:"2024-02-11 15:20",
          box:"-",
          worker:"张三"
        },
        {
          index:3,
          device:"266AF5D9020D7A",
          time:"2024-01-15 18:30",
          box:"240300001",
          worker:"张三"
        },
        {
          index:4,
          device:"266AF51FDC76C2",
          time:"2024-01-01 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:5,
          device:"266A7205128149",
          time:"2024-12-19 15:20",
          box:"240300001",
          worker:"张三"
        },
        {
          index:6,
          device:"266AF51FDC4569",
          time:"2024-12-14 15:30",
          box:"240300001",
          worker:"张三"
        },
        {
          index:7,
          device:"266A720512RT45",
          time:"2024-12-10 15:30",
          box:"240300001",
          worker:"张三"
        }
      ],
      inputLabel: {
        index: "序号",
        device: "设备唯一码",
        time: "入库时间",
        box:"箱号",
        worker: "操作员"
      }
    }
  }
}
</script>

<style>

.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}
.input-gray {
  background-color: #f9fafc; /* 设置文本框的背景颜色为浅灰色 */
}
.input-wrapper {
  display: flex;
  align-items: center;
}
.label {
  flex-shrink: 0;
  width: 70px; /* 可根据需要调整宽度 */
  margin-right: 10px;
  white-space: nowrap; /* 不换行 */
}
.Registration_code {
  display: flex;
  align-items: center;
}
/* 垂直居中 */
.box_code {
  font-size: 14px;
  color: #999999;
  width: 20%; /* 设置 p 元素的宽度比例 */
  margin-right: 10px; /* 设置 p 元素和 input 元素之间的间距 */
}

.box_input {
  flex: 2; /* 让输入框占满剩余空间 */
}

.dev_button {
  margin-left: 10px; /* 调整按钮与输入框的间距 */
}


.Device_code {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-top: 10px; /* 上方间距 */
}
.dev_code {
  font-size: 14px;
  color: #999999;
  width: 20%; /* 设置 p 元素的宽度比例 */
  margin-right: 10px; /* 设置 p 元素和 input 元素之间的间距 */
}
.dev_input {
  flex: 2; /* 让输入框占满剩余空间 */
}
.dev_button {
  margin-left: 10px; /* 调整按钮与输入框的间距 */
}

.code-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 20px; /* 上方间距 */
}

.Registration_code, .Device_code {
  margin-right: 30px; /* 右侧间距 */
}

</style>
